<template>
  <div>
    <h1>事件修饰符</h1>
    <button @click="handleClick">点击我</button>
    <button @click.stop="handleClick1">点击我1</button>
    <button @click.stop.prevent="handleClick2">点击我2</button>
    <button @click.stop.prevent.self="handleClick3">点击我3</button>
    <button @click.once="handleClick4">点击我4</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const handleClick = (e) => {
  console.log(e);
};
const handleClick1 = () => {
  console.log("点击我1");
};
const handleClick2 = () => {
  console.log("点击我2");
};
const handleClick3 = () => {
  console.log("点击我3");
};
const handleClick4 = () => {
  console.log("点击我4");
};
</script>
